<!-- SCHEMA-BASED EDITOR TEMPLATES -->

<script type="text/ng-template" id="schemaBasedEditor/master">
  <schema-based-choices-editor ng-if="schema().choices" local-value="$parent.localValue"
                               schema="schema()" choices="schema().choices"
                               is-disabled="isDisabled()">
  </schema-based-choices-editor>

  <schema-based-bool-editor ng-if="schema().type === 'bool' && !schema().choices"
                            local-value="$parent.localValue" is-disabled="isDisabled()"
                            allow-expressions="allowExpressions()"
                            label-for-focus-target="labelForFocusTarget()">
  </schema-based-bool-editor>

  <schema-based-int-editor ng-if="schema().type === 'int' && !schema().choices"
                           local-value="$parent.localValue" is-disabled="isDisabled()"
                           allow-expressions="allowExpressions()"
                           validators="schema().validators"
                           label-for-focus-target="labelForFocusTarget()">
  </schema-based-int-editor>

  <schema-based-float-editor ng-if="schema().type === 'float' && !schema().choices"
                             local-value="$parent.localValue" is-disabled="isDisabled()"
                             allow-expressions="allowExpressions()"
                             validators="schema().validators"
                             label-for-focus-target="labelForFocusTarget()">
  </schema-based-float-editor>

  <schema-based-unicode-editor ng-if="schema().type === 'unicode' && !schema().choices"
                               local-value="$parent.localValue" is-disabled="isDisabled()"
                               validators="schema().validators" ui-config="schema().ui_config"
                               allow-expressions="allowExpressions()"
                               label-for-focus-target="labelForFocusTarget()">
  </schema-based-unicode-editor>

  <schema-based-html-editor ng-if="schema().type === 'html' && !schema().choices"
                            local-value="$parent.localValue" is-disabled="isDisabled()"
                            allow-expressions="allowExpressions()"
                            label-for-focus-target="labelForFocusTarget()"
                            ui-config="schema().ui_config">
  </schema-based-html-editor>

  <schema-based-list-editor ng-if="schema().type === 'list' && !schema().choices"
                            local-value="$parent.localValue" is-disabled="isDisabled()"
                            item-schema="schema().items" len="schema().len"
                            ui-config="schema().ui_config" validators="schema().validators"
                            allow-expressions="allowExpressions()"
                            label-for-focus-target="labelForFocusTarget()">
  </schema-based-list-editor>

  <schema-based-dict-editor ng-if="schema().type === 'dict' && !schema().choices"
                            local-value="$parent.localValue" is-disabled="isDisabled()"
                            property-schemas="schema().properties"
                            allow-expressions="allowExpressions()"
                            label-for-focus-target="labelForFocusTarget()">
  </schema-based-dict-editor>

  <schema-based-custom-editor ng-if="schema().type === 'custom' && !schema().choices"
                              obj-type="schema().obj_type" local-value="$parent.localValue"
                              is-disabled="isDisabled()">
  </schema-based-custom-editor>
</script>

<script type="text/ng-template" id="schemaBasedEditor/choices">
  <select class="form-control" ng-model="$parent.$parent.localValue"
          ng-options="choice as choice for choice in choices()" required
          ng-disabled="isDisabled()">
  </select>
</script>

<script type="text/ng-template" id="schemaBasedEditor/expression">
  <input type="text" ng-model="localValue" class="form-control" ng-disabled="isDisabled()"
         required require-is-valid-expression focus-on="<[labelForFocusTarget()]>">
</script>

<script type="text/ng-template" id="schemaBasedEditor/bool">
  <div class="input-group">
    <span ng-if="!expressionMode">
      <input type="checkbox" ng-model="$parent.localValue" ng-disabled="isDisabled()"
             focus-on="<[labelForFocusTarget()]>">
    </span>

    <span ng-if="allowExpressions()">
      <schema-based-expression-editor ng-if="expressionMode" is-disabled="isDisabled()"
                                      local-value="$parent.$parent.localValue"
                                      param-names="paramNames" output-type="bool"
                                      label-for-focus-target="labelForFocusTarget()">
      </schema-based-expression-editor>
      <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="toggleExpressionMode()" ng-disabled="isDisabled()">
          <span ng-if="!expressionMode">E</span>
          <span ng-if="expressionMode"><del>E</del></span>
        </button>
      </span>
    </span>
  </div>
</script>

<script type="text/ng-template" id="schemaBasedEditor/int">
  <div class="input-group">
    <span ng-if="!expressionMode">
      <input type="number" ng-model="$parent.localValue" class="form-control" ng-disabled="isDisabled()"
             required apply-validation="validators()" focus-on="<[labelForFocusTarget()]>">
    </span>

    <span ng-if="allowExpressions()">
      <schema-based-expression-editor ng-if="expressionMode" is-disabled="isDisabled()"
                                      local-value="$parent.$parent.localValue"
                                      param-names="paramNames" output-type="int"
                                      ng-keypress="onKeypress($event)"
                                      label-for-focus-target="labelForFocusTarget()">
      </schema-based-expression-editor>
      <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="toggleExpressionMode()" ng-disabled="isDisabled()">
          <span ng-if="!expressionMode">E</span>
          <span ng-if="expressionMode"><del>E</del></span>
        </button>
      </span>
    </span>
  </div>
</script>

<script type="text/ng-template" id="schemaBasedEditor/float">
  <span>
    <span class="input-group" ng-form="floatForm">
      <span ng-if="!expressionMode">
        <input type="text" name="floatValue" ng-model="$parent.localValue" class="form-control"
               require-is-float apply-validation="validators()" ng-disabled="isDisabled()"
               focus-on="<[labelForFocusTarget()]>" ng-keypress="onKeypress($event)">
      </span>

      <span ng-if="allowExpressions()">
        <schema-based-expression-editor ng-if="expressionMode" is-disabled="isDisabled()"
                                        local-value="$parent.$parent.localValue"
                                        param-names="paramNames" output-type="float"
                                        label-for-focus-target="labelForFocusTarget()">
        </schema-based-expression-editor>
        <span class="input-group-btn">
          <button type="button" class="btn btn-default" ng-click="toggleExpressionMode()" ng-disabled="isDisabled()">
            <span ng-if="!expressionMode">E</span>
            <span ng-if="expressionMode"><del>E</del></span>
          </button>
        </span>
      </span>
    </span>

    <span ng-if="floatForm.floatValue.$error.isFloat" class="oppia-form-error" aria-live="assertive">
      Please enter a valid decimal number.
    </span>
    <span ng-if="!floatForm.floatValue.$error.isFloat && floatForm.floatValue.$error.isAtLeast"
          class="oppia-form-error" aria-live="assertive">
      Please enter a number that is at least <[getMinValue()]>.
    </span>
    <span ng-if="!floatForm.floatValue.$error.isFloat && floatForm.floatValue.$error.isAtMost"
          class="oppia-form-error" aria-live="assertive">
      Please enter a number that is at most <[getMaxValue()]>.
    </span>
  </span>
</script>

<script type="text/ng-template" id="schemaBasedEditor/unicode">
  <span ng-if="!allowExpressions()">
    <textarea ng-if="!getCodingMode() && getRows()"
              ng-model="$parent.$parent.localValue"
              rows="<[getRows()]>"
              placeholder="<[getPlaceholder()]>"
              ng-disabled="isDisabled()"
              class="form-control" focus-on="<[labelForFocusTarget()]>">
    </textarea>

    <input ng-if="!getCodingMode() && !getRows()" type="text"
           ng-model="$parent.$parent.localValue"
           placeholder="<[getPlaceholder()]>"
           ng-disabled="isDisabled()"
           ng-keypress="onKeypress($event)"
           class="form-control" focus-on="<[labelForFocusTarget()]>">

    <div ng-if="getCodingMode()" style="border: 1px solid #ccc;">
      <div ui-codemirror
           ng-model="$parent.$parent.localValue"
           ui-codemirror-opts="codemirrorOptions"
           ui-refresh="codemirrorStatus">
      </div>
    </div>
  </span>

  <span ng-if="allowExpressions()">
    <span ng-if="isDisabled()"
          ng-class="{'oppia-disabled-contenteditable': isDisabled()}"
          ng-bind-html="getDisplayedValue()">
    </span>
    <span ng-if="!isDisabled()">
      <unicode-with-parameters-editor local-value="$parent.$parent.localValue"
                                      allowed-parameter-names="allowedParameterNames"
                                      focus-on="<[labelForFocusTarget()]>">
      </unicode-with-parameters-editor>
    </span>
  </span>
</script>

<script type="text/ng-template" id="schemaBasedEditor/html">
  <rich-text-editor ng-if="!isDisabled()" html-content="$parent.localValue" size="<[getSize()]>">
  </rich-text-editor>
  <span ng-if="isDisabled()"
        ng-class="{'oppia-disabled-contenteditable': isDisabled()}"
        ng-bind-html="localValue">
  </span>
</script>

<script type="text/ng-template" id="schemaBasedEditor/dict">
  <div role="form">
    <div ng-repeat="property in propertySchemas()">
      <div class="form-group">
        <label for="<[fieldIds[property.name]]>"><[getHumanReadablePropertyDescription(property)]></label>
        <!-- TODO(sll): This is in the wrong place. It should be on the input field. -->
        <div id="<[fieldIds[property.name]]>">
          <schema-based-editor schema="property.schema" is-disabled="isDisabled()"
                               local-value="localValue[property.name]"
                               allow-expressions="allowExpressions()"
                               label-for-focus-target="$index === 0 ? labelForFocusTarget() : ''">
          </schema-based-editor>
        </div>
      </div>
    </div>
  </div>
</script>

<script type="text/ng-template" id="schemaBasedEditor/list">
  <table class="table">
    <tr ng-repeat="item in localValue track by $index">
      <td>
        <schema-based-editor schema="itemSchema()" is-disabled="isDisabled()" local-value="localValue[$index]"
                             allow-expressions="allowExpressions()"
                             label-for-focus-target="getFocusLabel($index)">
        </schema-based-editor>
      </td>
      <td ng-if="!len && (!minListLength || localValue.length > minListLength)">
        <button class="btn btn-default btn-xs oppia-small-delete-button protractor-test-delete-list-entry" type="button" ng-click="deleteElement($index)"
                ng-disabled="isDisabled()">
          <span class="glyphicon glyphicon-remove" title="Delete item">
          </span>
        </button>
      </td>
    </tr>
  </table>

  <!-- The margin-left is added here to left-align the button with the previous list items. -->
  <button ng-if="!len && (maxListLength === null || localValue.length < maxListLength)"
          type="button" class="btn btn-default btn-sm protractor-test-add-list-entry" ng-click="addElement()"
          ng-disabled="isDisabled()" style="margin-left: 8px;">
    <[addElementText]>
  </button>
</script>

<script type="text/ng-template" id="schemaBasedEditor/custom">
  <object-editor obj-type="<[objType]>" value="$parent.$parent.localValue" always-editable="true">
  </object-editor>
</script>


<!-- SCHEMA-BASED VIEWER TEMPLATES -->

<script type="text/ng-template" id="schemaBasedViewer/master">
  <schema-based-primitive-viewer ng-if="(schema().type === 'bool' || schema().type === 'int' || schema().type == 'float')" local-value="$parent.localValue">
  </schema-based-primitive-viewer>

  <schema-based-custom-viewer ng-if="schema().type === 'custom'" obj-type="schema().obj_type"
                              local-value="$parent.localValue">
  </schema-based-custom-viewer>

  <schema-based-dict-viewer ng-if="schema().type === 'dict'" property-schemas="schema().properties"
                            local-value="$parent.localValue">
  </schema-based-dict-viewer>

  <schema-based-html-viewer ng-if="schema().type === 'html'" local-value="$parent.localValue">
  </schema-based-html-viewer>

  <schema-based-list-viewer ng-if="schema().type === 'list'" item-schema="schema().items"
                            local-value="$parent.localValue">
  </schema-based-list-viewer>

  <schema-based-unicode-viewer ng-if="schema().type === 'unicode'" local-value="$parent.localValue">
  </schema-based-unicode-viewer>
</script>

<script type="text/ng-template" id="schemaBasedViewer/primitive">
  <span ng-class="{'label label-info': isExpression(localValue)}">
    <[localValue]>
  </span>
</script>

<script type="text/ng-template" id="schemaBasedViewer/custom">
  <[localValue]>
</script>

<script type="text/ng-template" id="schemaBasedViewer/dict">
  <div role="form">
    <div ng-repeat="property in propertySchemas()">
      <div class="form-group">
        <label><[getHumanReadablePropertyDescription(property)]></label>
        <div>
          <schema-based-viewer schema="property.schema" local-value="localValue[property.name]">
          </schema-based-viewer>
        </div>
      </div>
    </div>
  </div>
</script>

<script type="text/ng-template" id="schemaBasedViewer/html">
  <span ng-bind-html="localValue">
  </span>
</script>

<script type="text/ng-template" id="schemaBasedViewer/list">
  <table class="table">
    <tr ng-repeat="item in localValue track by $index">
      <td>
        <schema-based-viewer schema="itemSchema()" local-value="localValue[$index]">
        </schema-based-viewer>
      </td>
    </tr>
  </table>
</script>

<script type="text/ng-template" id="schemaBasedViewer/unicode">
  <span ng-bind-html="getDisplayedValue()">
  </span>
</script>


<!-- MODALS -->

<script type="text/ng-template" id="modals/editParamName">
  <div class="modal-header">
    <h3>Edit parameter name</h3>
  </div>

  <div class="modal-body">
    <strong>Parameter name</strong>
    <select class="form-control" ng-model="currentParamName"
            ng-options="option.value as option.name for option in paramOptions">
    </select>
  </div>

  <div class="modal-footer">
    <input type="submit" class="btn btn-default" value="Cancel" ng-click="cancel()">
    <input type="submit" class="btn btn-success" value="Done" ng-click="save(currentParamName)"
           ng-disabled="!currentParamName">
  </div>
</script>

<script type="text/ng-template" id="modals/customizeWidget">
  <div class="modal-header">
    <h3>Customize This Widget</h3>
  </div>

  <div class="modal-body">
    <form name="form.schemaForm">
      <div ng-repeat="customizationArg in customizationArgsList">
        <strong><[customizationArg.description]></strong>
        <div>
          <schema-based-editor local-value="customizationArg.value" schema="customizationArg.schema">
          </schema-based-editor>
        </div>
      </div>
    </form>
  </div>

  <div class="modal-footer">
    <input type="submit" class="btn btn-default" value="Cancel" ng-click="cancel()">
    <input type="submit" class="btn btn-success protractor-test-close-widget-editor" value="Done" ng-click="save(customizationArgsList)" ng-disabled="form.schemaForm.$invalid">
  </div>
</script>
